<template>
  <!-- <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> -->
  <div class="app-container">
    <div>
      <el-form
        ref="map"
        :inline="true"
        :rules="rules"
        :model="map"
        size="mini"
      >
        <el-form-item label="产品序列号" prop="id">
          <el-input v-model="map.id" clearable />
        </el-form-item>
        <el-form-item label="是否合格" prop="statusId">
          <el-select
            v-model="map.productTF"
            clearable
            placeholder="状态"
            style="width: 80px"
          >
            <el-option id="normal" value="1" label="合格" />
            <el-option id="disable" value="0" label="不合格" />
          </el-select>
        </el-form-item>
        <el-form-item label="报告是否通过" prop="statusId">
          <el-select
            v-model="map.reportState"
            clearable
            placeholder="状态"
            style="width: 80px"
          >
            <el-option id="normal" value="1" label="通过" />
            <el-option id="disable" value="0" label="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="querylist"
          >查询</el-button>
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="handlecreate"
          >添加</el-button>
          <el-button
            type="primary"
            icon="el-icon-s-opportunity"
            @click="getNoReports"
          >显示无报告号产品</el-button>
          <el-button
            type="primary"
            icon="el-icon-upload2"
            @click="SubmitReport"
          >提交已选产品报告</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="treeLoading"
      :data="tree.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      element-loading-text="Loading"
      border
      fit
      height="570"
      highlight-current-row
      row-key="ID"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55"
      />
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column label="产品序列号" width="200" align="center" prop="ID" />
      <el-table-column label="检验工人号" width="200" align="center" prop="WorkID" />
      <el-table-column label="产品是否合格" width="200" align="center" prop="ProductTF" />
      <el-table-column label="产品类型" width="200" align="center" sortable prop="ProductState" />
      <el-table-column label="报告号" align="center" prop="Report" />
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[15, 30]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tree.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加按钮页面 -->
    <el-dialog
      :visible.sync="createVisible"
      width="30%"
      :before-close="
        () => {
          createVisible = false
        }
      "
      :show-close="false"
    >
      <el-form
        ref="menuForm"
        :model="menuForm"
        :rules="rules"
        label-width="6vw"
      >
        <el-form-item label="产品类型">
          <el-select v-model="menuForm.productState" filterable placeholder="请选择产品类型" @change="getRulesName(menuForm.productState)">
            <el-option
              v-for="item in options"
              :key="item.productState"
              :label="item.productState"
              :value="item.productState"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-for="(item, index) in rulesname" :key="index" :label="item.rulesname">
          <el-input
            v-model="menuForm[rulesdecrite[index]]"
            placeholder="请输入规则评分"
            @change="setrulesname(item.rulesname,index)"
          />
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="cancelMenu">取消</el-button>
        <el-button type="primary" @click="createMenu">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
<script>
// 使用mock
import { getProduct } from '@/api/tree'
import { getNoReport, SubmitReport } from '@/api/tree'
import { saveCategory, selectProductState, selectRulesName } from '@/api/tree'
import { query } from '@/api/tree'
import { getToken } from '@/utils/auth'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      currentPage: 1, // 初始页
      pagesize: 15, //    每页的数据
      tree: [], // 页面数据
      options: '', // 产品类型
      rulesname: '', // 规则名称
      createVisible: false,
      editVisible: false,
      listLoading: true,
      input: '',
      select1: '',
      select2: '',
      select3: '',
      filterText: '',
      menuForm: {
        productState: '', // 产品类型
        workID: getToken().substring(1)
      },
      rulesdecrite: ['rulesdecrite1', 'rulesdecrite2', 'rulesdecrite3', 'rulesdecrite4'],
      rulesnames: ['rulesname1', 'rulesname2', 'rulesname3', 'rulesname4'],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      form: {
        delivery: false
      },
      rules: {
        productState: [
          {
            required: true,
            message: '请输产品类型',
            trigger: 'blur'
          }
        ],
        rulesname: [
          {
            required: true,
            message: '请输规则名称',
            trigger: 'blur'
          }
        ]
      }, // 验证规则配置
      map: {
        id: '', // 产品序列号
        productTF: [0, 1], // 产品是否合格
        reportState: [0, 1], // 报告是否通过
        workID: ''
      }, //  表单提交
      multipleSelection: [],
      multipleSelections: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 后端数据部分
    shujuqxi(response) { // 数据清洗
      var a = response.data
      for (let I = 0; I < a.length; I++) {
        if (a[I].Report === -100) {
          a[I].Report = '无报告号'
        }
        if (a[I].ProductTF === false) {
          a[I].ProductTF = '不合格'
        } else {
          a[I].ProductTF = '合格'
        }
      }
      if (a != null) {
        this.tree = a
      }
    },
    fetchData() {
      this.treeLoading = true
      this.map.workID = getToken().substring(1)
      getProduct({ workID: parseInt(this.map.workID), id: parseInt(this.map.id), productTF: parseInt(this.map.productTF), reportState: parseInt(this.map.reportState) }).then((response) => {
        // console.log(response)
        this.shujuqxi(response)
        this.treeLoading = false
      })
    },
    // 分页
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },

    // 显示无报告产品
    getNoReports() {
      getNoReport({ workID: parseInt(this.map.workID) }).then((response) => {
        this.shujuqxi(response)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    // 表格颜色警告
    tableRowClassName({ row, rowIndex }) {
      if (row.Report === '无报告号') {
        return 'warning-row'
      }
      return ''
    },
    reset() {
      this.map.id = ''
      this.map.productTF = ''
      this.map.reportState = ''
    },
    querylist() {
      this.$refs['map'].validate((valid) => {
        if (valid) {
          if (this.map.id === '' && this.map.productTF === '' && this.map.reportState === '') {
            this.fetchData()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          } else {
            console.log(this.map)
            query({ workID: parseInt(this.map.workID), id: parseInt(this.map.id), productTF: parseInt(this.map.productTF), reportState: parseInt(this.map.reportState) }).then((response) => {
              this.shujuqxi(response)
            })
          }
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    handlecreate() { // 获取产品类型
      selectProductState().then((response) => {
        this.options = response.data
        this.createVisible = true
      })
    },
    getRulesName(data) { // 获取规则名称
      selectRulesName({ productState: data }).then((response) => {
        this.rulesname = response.data
      })
    },
    setrulesname(data, index) { // 设置规则内容
      this.menuForm[this.rulesnames[index]] = data
    },
    cancelMenu() {
      // console.log(this.menuForm)
      this.createVisible = false
    },
    SubmitReport() {
      this.multipleSelection.forEach((item, index) => {
        item = {}
        item.id = parseInt(this.multipleSelection[index].ID)
        item.workID = parseInt(this.multipleSelection[index].WorkID)
        if (this.multipleSelection[index].ProductTF === '合格') {
          item.productTF = 1
        } else {
          item.productTF = 0
        }
        item.productState = this.multipleSelection[index].ProductState
        item.report = parseInt(this.multipleSelection[index].Report)
        this.multipleSelections.push(item)
      })
      console.log(this.multipleSelections)
      SubmitReport(this.multipleSelections).then((response) => {
        this.fetchData()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    createMenu() {
      this.$refs['menuForm'].validate((valid) => {
        // console.log(this.menuForm)
        if (valid) {
          saveCategory(this.menuForm).then((response) => {
            this.fetchData()
            this.createVisible = false
            this.$message({
              type: 'success',
              message: '操作成功'
            })
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    },
    canceleditMenu() {
      console.log(this.editmenuForm)
      this.editVisible = false
    }
  }
}
</script>
